<template>
   <div > 
        <DiscussWrite  v-if="DiscussState" />
         <DiscussHead id="DiscussHead" class="flex" />   
         <!-- <div v-if="DiscussData == 0" id="description">{{description}}</div> -->
         <el-empty v-if="DiscussData.length == 0" id="description" :description="description"></el-empty>
         <DiscussContent id="DiscussContent" v-else />
         
          <!-- 分页器 -->
         <Pagination id="Pagination" :PageInfo="DiscussInfo" :changePage="changePage"  v-if="DiscussInfo.total > DiscussInfo.pageSize"/>

   </div>
</template>
<script>
import { mapActions, mapState,mapMutations } from 'vuex'
import DiscussContent from './DiscussContent/DiscussContent.vue'
import DiscussHead from './DiscussHead/DiscussHead.vue'
import DiscussWrite from './DiscussWrite/DiscussWrite.vue'
import Pagination from '@/components/Package/Pagination/Pagination.vue'
  export default 
  {
     components: { DiscussWrite, DiscussContent, DiscussHead ,Pagination},
     name :'', 
     data() {
      return {
         description:"无人评论😞",
         timer:null,
      }
     },
     computed:{
       ...mapState('Discuss',['DiscussState','DiscussData','DiscussInfo']) ,//评论窗口 评论数据 分页器信息
       ...mapState('ArticleDetail',['ArticleDetail']) //文章详情
     },
     methods:{
       ...mapActions('Discuss',['getDiscuss']), //
       ...mapMutations('Discuss',['REFRESH']), //刷新
      ...mapMutations('Tool',['SETNAVIGATIONFLAG','SETNAVIGATION']),//导航条
       async init(){
         let id = this.ArticleDetail.id || 0
         let res = await this.getDiscuss(id)
         if(res.code != 200) this.$message.error(res.message)
       },
       async  changePage(newPageno){
            this.SETNAVIGATION([false,false])
            this.SETNAVIGATIONFLAG(false)
            this.DiscussInfo.pageNo=newPageno
            if(newPageno<=0) newPageno =1
             await this.init();
             this.timer=setTimeout(() => {
               this.SETNAVIGATIONFLAG(true)
               clearTimeout(this.timer)
             }, 1000);
         }
     },
     mounted() {
       this.init()
     },
     beforeDestroy(){
          this.REFRESH()
          clearTimeout(this.timer)
          this.SETNAVIGATIONFLAG(true)
     },
     
  }
</script>
<style scoped lang='less'>


#DiscussWrite{
   width: 100%;
   margin-top: 10px;
}
#description{
   margin-top: 50px;
   width: 100%;
   text-align: center;
   font-size: 25px;
   font-weight: 600;
}
#DiscussContent{
   width: 100%;
   margin-bottom: 0px;
   padding: 5px;
   box-sizing: border-box;
 
}
#DiscussHead{
   width: 100%;
   margin: 20px 0;
   flex-wrap: nowrap;
   overflow: hidden;
   box-sizing: border-box;
}
#Pagination{
   margin-top: 20px;
   margin-bottom: 50px;
}
</style>